<template>
  <div>
    <el-card class="box-card" :body-style="{padding:'5px'}">
      <div class="clearfix" style="padding:5px;">
        <span style="line-height: 36px;">详情</span>
      </div>

      <el-form ref="form" :model="form" label-width="120px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="银行名称:" prop='bankName'>
              <el-select v-model="form.bankName" placeholder="请选择" style='width: 100%'
                         :disabled="this.pageModel === 'EDIT'">
                <el-option
                  v-for="item in bankCode"
                  :label="item.bank"
                  :value="item.bank">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="单笔限额(元):" prop='singleLimit'>
              <el-input v-model="form.singleLimit" :disabled="disableForm" style='width: 100%'></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="单日限额(元):" prop='dayLimit'>
              <el-input v-model="form.dayLimit" :disabled="disableForm" style='width: 100%'></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="单月限额(元):" prop='monthLimit'>
              <el-input v-model="form.monthLimit" :disabled="disableForm" style='width: 100%'></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="状态:" prop="state">
              <el-select v-model="form.state" :disabled="disableForm" style='width: 100%'>
                <el-option label="上线" value="1"></el-option>
                <el-option label="下线" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="方式:" prop='channel'>
              <el-select v-model="form.channel" :disabled="disableForm" style='width: 100%'>
                <el-option label="富有支付" value="I"></el-option>
                <el-option label="易宝支付" value="P"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item>
          <el-button type="info" @click="saveHandler" :disabled="disableForm">保存</el-button>
          <el-button type="danger" @click="resetHandler" :disabled="disableForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script type="text/babel">
  import assignDeep from 'assign-deep'
  import {mapActions} from 'vuex'

  import bankStore from './bll/bankStore'
  import store from '../../store'

  (!store.state.bankStore) && store.registerModule('bankStore', bankStore)

  export default {
    data() {
      return {
        disableForm: true,
        pageModel: 'EDIT',
        bankCode: [{
          bank: '农业银行',
          code: 'ABC'
        }, {
          bank: '中国银行',
          code: 'BOC'
        }, {
          bank: '建设银行',
          code: 'CCB'
        }, {
          bank: '光大银行',
          code: 'CEB'
        }, {
          bank: '兴业银行',
          code: 'CIB'
        }, {
          bank: '中信银行',
          code: 'CITIC'
        }, {
          bank: '招商银行',
          code: 'CMB'
        }, {
          bank: '交通银行',
          code: 'COMM'
        }, {
          bank: '广发银行',
          code: 'GDB'
        }, {
          bank: '华夏银行',
          code: 'HXBANK'
        }, {
          bank: '工商银行',
          code: 'ICBC'
        }, {
          bank: '邮储银行',
          code: 'PSBC'
        }, {
          bank: '平安银行',
          code: 'SPABANK'
        }, {
          bank: '浦发银行',
          code: 'SPDB'
        }, {
          bank: '民生银行',
          code: 'CMBC'
        }, {
          bank: '上海银行',
          code: 'SHBANK'
        }],
        form: {
          id: '',
          bankName: '',
          singleLimit: '',
          dayLimit: '',
          monthLimit: '',
          state: '',
          channel: ''
        }
      }
    },

    props: {
      param: {
        type: Object
      },
      mode: {
        type: String
      }
    },

    watch: {
      param(record) {
        if (record) {
          this.form.bankName = record.bankName;
          this.form.singleLimit = record.singleLimit;
          this.form.dayLimit = record.dayLimit;
          this.form.monthLimit = record.monthLimit;
          this.form.state = record.state;
          this.form.id = record.id;
          this.form.channel = record.channel;
        } else {
          assignDeep(this.form, {
            bankName: '',
            singleLimit: '',
            dayLimit: '',
            monthLimit: '',
            state: '',
            id: '',
            channel: ''
          });
        }
      },
      mode(val) {
        this.pageModel = val;
      }
    },

    mounted() {
      this.initPage();
    },

    methods: {
      ...mapActions(['queryBanks', 'addBank', 'editBank']),
      saveHandler() {
        var newform = this.form
        console.log(this.form)
        for (var i = 0; i < this.bankCode.length; i++) {
          if (this.form.bankName === this.bankCode[i].bank) {
            newform.bankCode = this.bankCode[i].code
          }
        }
        if (this.form.state === '上线') {
          newform.state = '1'
        } else if (this.form.state === '下线') {
          newform.state = '0'
        }
        if (this.pageModel === 'ADD') {
          this.addBank({formData: newform}).then(() => {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.$parent.initPage()
            this.disable()
            this.pageModel = 'EDIT'
          })

        } else {
          if (this.editBank({formData: newform})) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.disable()
            this.pageModel = 'EDIT'
          }
        }

      },

      resetHandler() {
        console.log(this.$refs.form)
        this.$refs.form.resetFields();
        this.disableForm = true;
      },

      initPage() {

      },

      // interface for invoking

      disable() {
        this.disableForm = true;
      },
      enable() {
        this.disableForm = false;
      },
      clear() {
        this.$refs.form.resetFields();
      }

    }
  }
</script>

